<template>
    <div class="plus-button">
        <div class="plus-area">
            <div class="icon-wrapper">
                <el-icon size="60" class="plus-icon">
                    <Plus />
                </el-icon>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
</script>

<style lang="scss" scoped>
.plus-button {
    width: 100%;
    height: 100%;

    .plus-area {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px dashed #c0c4cc;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;

        &:hover {
            border-color: #909399;

            .icon-wrapper {
                border-color: #909399;

                .plus-icon {
                    color: #909399;
                }
            }
        }
    }

    .icon-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 150px;
        height: 150px;
        border: 1px dashed #c0c4cc;
        border-radius: 50%;
        transition: all 0.2s;

        .plus-icon {
            font-size: 24px;
            color: #c0c4cc;
            transition: color 0.2s;
        }
    }
}
</style>